<template>
  <div>
    <div class="demonstration">Use time-picker-v2 is-range</div>
    <div class="demonstration">Value：{{ params.timeRange }}</div>

    <div class="form-content">
      <el-inline-form
        ref="formRef"
        :model="params"
        label-width="auto"
        class="demo-ruleForm"
        :rules="rules"
        :span="12"
      >
        <el-inline-form-item label="time" prop="timeRange" :span="12">
          <el-time-picker-v2
            v-model="params.timeRange"
            is-range
            :minutes="['00', '30']"
            value-format="HH:mm"
            start-default-value="00:00"
            end-default-value="24:00"
          />
        </el-inline-form-item>
        <template #options>
          <el-button type="primary" @click="submitForm(formRef)"
            >Submit</el-button
          >
        </template>
      </el-inline-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { FormInstance } from 'hive-plus'

const formRef = ref<FormInstance>()

const params = ref({
  time: '',
  timeRange: [],
})

const rules = ref({
  timeRange: [
    {
      required: true,
      message: 'Please pick a time',
      validator: (rule: any, value: any, callback: any) => {
        if (
          !value ||
          value.length === 0 ||
          value.filter((v: string) => !v).length
        ) {
          callback(new Error('Please pick a time'))
        } else {
          callback()
        }
      },
      trigger: 'change',
    },
  ],
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.instance().validate((valid) => {
    if (valid) {
      console.log('submit!', params.value)
    } else {
      console.log('error submit!')
    }
  })
}
</script>

<style scoped lang="scss">
.demonstration {
  text-align: center;
  margin-bottom: 12px;
}
.form-content {
  width: 600px;
  margin: 0 auto;
}
</style>
